<!DOCTYPE HTML>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="/static/plugins/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="/static/webuploader/webuploader.css">
    <style type="text/css">
        html {
            height: 100%;
        }

        body {
            background: #EFF3FC;
            height: 100%;
        }

        .content {
            margin-left: 0;
            margin-top: 0;
            width: auto;
            padding: 0px 20px 0 20px;
            height: 97%;
        }

        table {
            width: 90%;
            margin: 0 auto;
        }

        tr {
            height: 35px;
            text-align: center;
        }

        tr:first-child {
            background: #cccccc;
            text-align: center;
        }

        tr th {
            text-align: center;
        }

        .searchDetail {
            height: 60px;
            line-height: 60px;
        }

        button, input {
            line-height: normal;
        }

        #timeChance {
            margin-left: 24px;
            margin-right: 24px;
        }

        .timeStatus {
            display: none;
        }

        #keyWord {
            padding: 6px;
        }

        .tabList thead tr th {
            background: #EFF3FC;
        }

        .officeTable {
            background: #ffffff;
            border-radius: 10px;
            border: 1px solid #cccccc;
            height: 86%;
        }

        .officeTable table {
            width: 95%;
            margin: 0 auto;
            height: 88%;
        }

        #demo7 {
            margin-left: 3%;
        }
    </style>
</head>
<body ng-app="logMag" ng-controller="logManageCtrl">
<div class="content">
    <div style="padding: 10px 0;">收集管理>办公室</div>
    <div id="uploader" class="wu-example">
        <!--用来存放文件信息-->
        <div id="thelist" class="uploader-list"></div>
        <div class="btns">
            <div id="picker">选择文件</div>
            <button id="ctlBtn" class="btn btn-default">开始上传</button>
        </div>
    </div>
    <div class="searchDetail" style="display: block;">
        <label>时间</label>
        <select name="" class="timeChance" style="height: 30px;">
            <option value="0">全部</option>
            <option value="1">今天</option>
            <option value="2">最近3天</option>
            <option value="3">最近7天</option>
            <option value="4">最近30天</option>
            <option value="5">自定义</option>
        </select>
        <div style="display: inline-block">
            <div class="timeStatus" id="timeChance">
                <span>从</span>
                <div class="c-datepicker-date-editor c-datepicker-single-editor J-datepicker-day mt10">
                    <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
                    <input type="text" autocomplete="off" ng-model="startValue" id="startTime" name=""
                           placeholder="选择日期" class=" c-datepicker-data-input only-date">
                </div>
                <span>到</span>
                <div class="c-datepicker-date-editor c-datepicker-single-editor J-datepicker-day mt10">
                    <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
                    <input type="text" autocomplete="off" name="" id="stopTime" placeholder="选择日期"
                           class=" c-datepicker-data-input only-date">
                </div>
            </div>
        </div>
        <label for="">操作关键字</label>
        <input type="text" id="keyWord" placeholder="操作/操作描述"/>
        <button ng-click="searhFun()" class="btn btn-primary" style="padding: 5px 12px;margin-top: -3px;">查询</button>
        <button style="padding: 4px 12px;border-radius: 4px;">重置</button>
    </div>
    <div class="officeTable">
        <table class="col-sm-12 table table-striped tabList">
            <thead>
            <tr>
                <th width="3%">序号</th>
                <th width="25%">操作类型</th>
                <th width="13%">操作描述</th>
                <th width="10%">模块</th>
                <th width="10%">操作人</th>
                <th width="10%">角色</th>
                <th width="10%">操作时间</th>
                <th width="10%">IP</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="item in dataList1">
                <td>{{ item.id }}</td>
                <td>{{ item.type }}</td>
                <td>{{ item.status }}</td>
                <td>{{ item.aaa }}</td>
                <td>{{ item.user }}</td>
                <td>{{ item.juese }}</td>
                <td>{{ item.time }}</td>
                <td>{{ item.ip }}</td>
            </tr>
            </tbody>
        </table>
        <div id="demo7" class="pag"></div>
    </div>
</div>
<script type="text/javascript" src="/static/assets/js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="/static/assets/js/bui-min.js"></script>
<script type="text/javascript" src="/static/datepicker/js/datepicker.all.js"></script>
<script type="text/javascript" src="/static/plugins/angular/angular.min.js"></script>
<script type="text/javascript" src="/static/assets/js/config-min.js"></script>
<script type="text/javascript" src="/static/plugins/layui/js/layui.js"></script>
<script type="text/javascript" src="/static/webuploader/webuploader.js"></script>
<script type="text/javascript">
    state = 'pending',
        uploader;
    $("#ctlBtn").on('click', function () {
        if (state === 'uploading') {
            uploader.stop();
        } else {
            uploader.upload();
        }
    });

    var uploader = WebUploader.create({
        // swf文件路径
        swf: '/static/webuploader/Uploader.swf',
        // 文件接收服务端。
        server: '/api/document/uploadfile',
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#picker',
        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        resize: false,
        chunked: false,
    });

    // 当有文件被添加进队列的时候
    uploader.on('fileQueued', function (file) {
        $('#thelist').append('<div id="' + file.id + '" class="item">' +
            '<h4 class="info">' + file.name + '</h4>' +
            '<p class="state">等待上传...</p>' +
            '</div>');
    });

    // 文件上传过程中创建进度条实时显示。
    uploader.on('uploadProgress', function (file, percentage) {
        var $li = $('#' + file.id),
            $percent = $li.find('.progress .progress-bar');

        // 避免重复创建
        if (!$percent.length) {
            $percent = $('<div class="progress progress-striped active">' +
                '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                '</div>' +
                '</div>').appendTo($li).find('.progress-bar');
        }

        $li.find('p.state').text('上传中');

        $percent.css('width', percentage * 100 + '%');
    });

    uploader.on('uploadSuccess', function (file) {
        $('#' + file.id).find('p.state').text('已上传');
    });

    uploader.on('uploadError', function (file) {
        $('#' + file.id).find('p.state').text('上传出错');
    });

    uploader.on('uploadComplete', function (file) {
        $('#' + file.id).find('.progress').fadeOut();
    });
    var app = angular.module('logMag', []);
    var org_id = {{ org_id }};
    app.controller('logManageCtrl', function ($scope, $http) {
        console.log("1111");
        $scope.dataList = [{
            "id": "1",
            "type": "login",
            "status": "登录系统",
            "aaa": "登录",
            "user": "管理员",
            "juese": "admin",
            "time": "2019.1.03",
            "ip": "1.2.3.3",
        }, {
            "id": "1",
            "type": "login",
            "status": "登录系统",
            "aaa": "登录",
            "user": "管理员",
            "juese": "admin",
            "time": "2019.1.03",
            "ip": "1.2.3.3",
        }, {
            "id": "1",
            "type": "login",
            "status": "登录系统",
            "aaa": "登录",
            "user": "管理员",
            "juese": "admin",
            "time": "2019.1.03",
            "ip": "1.2.3.3",
        }, {
            "id": "1",
            "type": "login",
            "status": "登录系统",
            "aaa": "登录",
            "user": "管理员",
            "juese": "admin",
            "time": "2019.1.03",
            "ip": "1.2.3.3",
        }, {
            "id": "1",
            "type": "login",
            "status": "登录系统",
            "aaa": "登录",
            "user": "管理员",
            "juese": "admin",
            "time": "2019.1.03",
            "ip": "1.2.3.3",
        }, {
            "id": "1",
            "type": "login",
            "status": "登录系统",
            "aaa": "登录",
            "user": "管理员",
            "juese": "admin",
            "time": "2019.1.03",
            "ip": "1.2.3.3",
        }, {
            "id": "1",
            "type": "login",
            "status": "登录系统",
            "aaa": "登录",
            "user": "管理员",
            "juese": "admin",
            "time": "2019.1.03",
            "ip": "1.2.3.3",
        }, {
            "id": "1",
            "type": "login",
            "status": "登录系统",
            "aaa": "登录",
            "user": "管理员",
            "juese": "admin",
            "time": "2019.1.03",
            "ip": "1.2.3.3",
        }, {
            "id": "1",
            "type": "login",
            "status": "登录系统",
            "aaa": "登录",
            "user": "管理员",
            "juese": "admin",
            "time": "2019.1.03",
            "ip": "1.2.3.3",
        }, {
            "id": "1",
            "type": "login",
            "status": "登录系统",
            "aaa": "登录",
            "user": "管理员",
            "juese": "admin",
            "time": "2019.1.03",
            "ip": "1.2.3.3",
        }, {
            "id": "1",
            "type": "login",
            "status": "登录系统",
            "aaa": "登录",
            "user": "管理员",
            "juese": "admin",
            "time": "2019.1.03",
            "ip": "1.2.3.3",
        }, {
            "id": "1",
            "type": "login",
            "status": "登录系统",
            "aaa": "登录",
            "user": "管理员",
            "juese": "admin",
            "time": "2019.1.03",
            "ip": "1.2.3.3",
        }, {
            "id": "1",
            "type": "login",
            "status": "登录系统",
            "aaa": "登录",
            "user": "管理员",
            "juese": "admin",
            "time": "2019.1.03",
            "ip": "1.2.3.3",
        }, {
            "id": "1",
            "type": "login",
            "status": "登录系统",
            "aaa": "登录",
            "user": "管理员",
            "juese": "admin",
            "time": "2019.1.03",
            "ip": "1.2.3.3",
        }, {
            "id": "1",
            "type": "login",
            "status": "登录系统",
            "aaa": "登录",
            "user": "管理员",
            "juese": "admin",
            "time": "2019.1.03",
            "ip": "1.2.3.3",
        }, {
            "id": "1",
            "type": "login",
            "status": "登录系统",
            "aaa": "登录",
            "user": "管理员",
            "juese": "admin",
            "time": "2019.1.03",
            "ip": "1.2.3.3",
        }, {
            "id": "1",
            "type": "login",
            "status": "登录系统",
            "aaa": "登录",
            "user": "管理员",
            "juese": "admin",
            "time": "2019.1.03",
            "ip": "1.2.3.3",
        }, {
            "id": "1",
            "type": "login",
            "status": "登录系统",
            "aaa": "登录",
            "user": "管理员",
            "juese": "admin",
            "time": "2019.1.03",
            "ip": "1.2.3.3",
        }]
        //分页
        layui.use(['laypage', 'layer'], function () {
            var laypage = layui.laypage
                , layer = layui.layer;

            laypage.render({
                elem: 'demo7'
                , count: $scope.dataList.length
                , layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
                , jump: function (obj) {
                    //obj.curr得到当前页，以便向服务端请求对应页的数据。
                    //obj.limit得到每页显示的条数
                    $scope.dataList1 = $scope.dataList.slice((obj.curr - 1) * obj.limit, obj.curr * obj.limit);
                    $scope.$digest();
                }
            });
        })
    })
    //控制时间选择插件的出现
    $(".timeChance").bind("change", function () {
        var dataname = $(this).val();
        if (dataname == 5) {
            $("#timeChance").removeClass("timeStatus");
        } else {
            $("#timeChance").addClass("timeStatus")
        }
    });

</script>
</body>
</html>  